import QtQuick 1.1
import com.nokia.meego 1.0
import "Logic.js" as Logic

Page {
    id: pageStopLearning

    tools: ToolBarLayout {
        id: tool_only_back
        opacity: userTheme.opacityToolbar
        ToolIcon {
            id: toolIconBack
            //iconId: "toolbar-back"
            iconSource: "images/toolbar/back.png"
            onClicked: {
                pageStack.pop();
            }
        }
    } //ToolBarLayout

    QNMTitle {
        id: titlePage
        text: qsTr("Learn words")
        image: "images/learn.png"
        busy: false
    }

    BackgroundPage { }

    Flickable {
        id: flicktextArea
        anchors {
            top: titlePage.bottom
            bottom: parent.bottom
            left: parent.left
            right: parent.right
            topMargin: screen.orientationString == "Landscape" || screen.orientationString == "LandscapeInverted" ? 5 : 15
            leftMargin: screen.orientationString == "Landscape" || screen.orientationString == "LandscapeInverted" ? 40 : 20
            rightMargin: screen.orientationString == "Landscape" || screen.orientationString == "LandscapeInverted" ? 40 : 20
            bottomMargin: screen.orientationString == "Landscape" || screen.orientationString == "LandscapeInverted" ? 5 : 15
        }

        contentWidth: contentDescr.width
        contentHeight: contentDescr.height

        clip: true

        Column {
            id: contentDescr
            width: flicktextArea.width
            spacing: screen.orientationString == "Landscape" || screen.orientationString == "LandscapeInverted" ? 3 : 8

            Row {
                id: rowTitleDescr
                height: 100
                spacing: 30

                Image {
                    id: imgIface
                    anchors.verticalCenter: parent.verticalCenter
                    source: "images/statistic.png"
                    height: 96
                    width: 96
                    smooth: true
                }

                Label {
                    id: titleDescr
                    anchors.verticalCenter: parent.verticalCenter
                    font.pixelSize: screen.orientationString == "Landscape" || screen.orientationString == "LandscapeInverted" ? 30 : 26
                    text: qsTr("Statistics of the results")
                }
            }

            //============================

            ProgressBar {
                id: spliter1
                anchors.horizontalCenter: parent.horizontalCenter
                width: parent.width*0.85; value: 0
            }

            Row {
                id: rowNW
                height: 70
                width: parent.width
                spacing: 20
                Image { smooth: true; anchors.verticalCenter: parent.verticalCenter; source: "images/pushpin.png"; height: 40; width: 40  }
                Label { anchors.verticalCenter: parent.verticalCenter; font.pixelSize: 28; text: qsTr("Number of words:"); width: parent.width*0.7 }
                Label {
                    id: nwValue;
                    anchors.verticalCenter: parent.verticalCenter;
                    font.pixelSize: 28;
                    text: (appWindow.answTrue + appWindow.answFalse)
                }
            }
            Row {
                id: rowWT
                height: 70
                width: parent.width
                spacing: 20
                Image { smooth: true; anchors.verticalCenter: parent.verticalCenter; source: "images/pushpin.png"; height: 40; width: 40  }
                Label { anchors.verticalCenter: parent.verticalCenter; font.pixelSize: 28; text: qsTr("Correct answers:"); width: parent.width*0.7 }
                Label {
                    id: wtValue;
                    anchors.verticalCenter: parent.verticalCenter;font.pixelSize: 28;
                    text: appWindow.answTrue
                }
            }
            MyProgressBar {
                id: pCor
                height: 30
                width: 0.9*parent.width
                anchors.horizontalCenter: parent.horizontalCenter
                minValue: 0
                maxValue: (appWindow.answTrue + appWindow.answFalse)
                value: appWindow.answTrue
                color: "green"
            }
            Row {
                id: rowWF
                height: 70
                width: parent.width
                spacing: 20
                Image { smooth: true; anchors.verticalCenter: parent.verticalCenter; source: "images/pushpin.png"; height: 40; width: 40  }
                Label { anchors.verticalCenter: parent.verticalCenter; font.pixelSize: 28; text: qsTr("Incorrect answers:"); width: parent.width*0.7 }
                Label {
                    id: wfValue;
                    anchors.verticalCenter: parent.verticalCenter;
                    font.pixelSize: 28;
                    text: appWindow.answFalse
                }
            }
            MyProgressBar {
                id: pInc
                height: 30
                width: 0.9*parent.width
                anchors.horizontalCenter: parent.horizontalCenter
                minValue: 0
                maxValue: (appWindow.answTrue + appWindow.answFalse)
                value: appWindow.answFalse
                color: "red"
            }

            //============================

            ProgressBar {
                id: spliter2
                anchors.horizontalCenter: parent.horizontalCenter;
                width: parent.width*0.85; value: 0
            }

            Item { width: parent.width; height: 20 }

            //------------------------------
            Text {
                font.pixelSize: screen.orientationString == "Landscape" || screen.orientationString == "LandscapeInverted" ? 26 : 19
                text: qsTr("List of words with incorrect answers")
            }
            Rectangle {
                id: frameErrorWords
                height: 400
                width: screen.orientationString == "Landscape" || screen.orientationString == "LandscapeInverted" ? parent.width - 60 : parent.width - 10
                anchors.horizontalCenter: parent.horizontalCenter
                radius: 10
                border.color: "gray"
                border.width: 3
                color: "transparent"
                Component {
                    id: itemDelegate
                    Rectangle {
                        height: 80
                        width: frameErrorWords.width
                        //anchors.horizontalCenter: frameErrorWords.horizontalCenter
                        border.color: "gray"
                        color: "transparent"
                        gradient: Gradient {
                            GradientStop { position: 0; color: "transparent" }
                            GradientStop { position: 1; color: "lightgrey" }
                        }
                        radius: 10
                        Item{
                            id: s1
                            clip: true
                            anchors.top: parent.top
                            anchors.left: parent.left
                            anchors.leftMargin: 20
                            width: parent.width - 30
                            height: parent.height/3
                            Text{ anchors.verticalCenter: parent.verticalCenter; font.pixelSize: 22; text: cppMeeWords.remEnter(model_word) }
                        }
                        Item {
                            id: s2
                            clip: true
                            anchors.top: s1.bottom
                            anchors.left: parent.left
                            anchors.leftMargin: 20
                            width: parent.width - 30
                            height: parent.height/3
                            Text{ anchors.verticalCenter: parent.verticalCenter; font.pixelSize: 22; text: cppMeeWords.remEnter(model_translation) }
                        }
                        Item {
                            id: s3
                            anchors.top: s2.bottom
                            anchors.left: parent.left
                            anchors.leftMargin: 20
                            width: parent.width*0.8
                            height: parent.height/3
                            Row {
                                anchors.centerIn: parent
                                width: parent.width
                                height: parent.height
                                Text {
                                    font.pixelSize: 20;
                                    anchors.verticalCenter: parent.verticalCenter
                                    text: show_error + "/" + word_show
                                    width: parent.width * 0.2
                                }
                                MyProgressBar {
                                    anchors.verticalCenter: parent.verticalCenter
                                    width: parent.width*0.8
                                    height: parent.height*0.8
                                    minValue: 0
                                    maxValue: word_show
                                    value: show_error
                                    color: "red"
                                }
                            }

                        }
                    }
                }
                ListView {
                    id: listViewErrorWordsTest
                    anchors.fill: parent
                    anchors.centerIn: parent
                    clip: true
                    model: listModelErrorWordsTest
                    delegate: itemDelegate
                }
            } //Rectangle

            ListModel {
                id: listModelErrorWordsTest
                Component.onCompleted: {
                    var listWE = appWindow.bufWordsErrorTest
                    for( var z=0; z < listWE.length; z++ ) {
                        var obj = listWE[ z ]
                        listModelErrorWordsTest.append({
                                    model_word: obj.model_word,
                                    model_translation: obj.model_translation,
                                    word_show: obj.word_show ,
                                    show_error: obj.show_error
                        })
                    }
                }
            }

            //------------------------------

            Item { width: parent.width; height: 20 }

            //============================

        }
    } // Flickable

}
